<!DOCTYPE html>
<html>

<head>
    <title>Vue.js github commits example</title>

    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <p>这是<span>静态内容</span></p> -->
        <!-- <p>{{message}}</p> -->
        <!-- <child></child> -->
    </div>
    <!-- <script src="mock.js"></script> -->
    <script type="text/javascript">
        // const  App=`
        //  <template><div id="app">
        //     <p>这是<span>静态内容</span></p>
            
        // </div></template>`
        
         const App =   {    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
                data(){
                    return {count:0}
                }, 
                template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'
            }

 
        var vm = new Vue({
            el: '#app',
            data: {
                message: '第一个vue实例'
            },
            components: { App },
            render: h => h(App)
            // components: {
            //     child: {
            //         template: "<div>{{a}}</div>",
            //         inject: ['a']
            //     }
            // },
            // provide: {
            //     a: 'a'
            // }
        })
        // .$mount('#app')
    </script>
</body>

</html>